<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vue-router.js"></script>
		
		<style>
			html,body{
				margin:0 ;
			}
			
			.header{
				background-color: orange;
				height:80px ;
			}
			.contain{
				display:flex ;
			}
			
			.left{
				background-color: lightgreen;
				flex:2,;
				height:500px ;
			}
			.main{
				background-color: lightpink;
				flex:8;
				height:500px ;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<router-view></router-view>
			<div class="contain">
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
			</div>
		</div>
	</body>
	<script>
		var header = {
			template: '<div class="header">头部区域</div>'
		}

		var leftBox = {
			template: '<div class="left">左边区域</div>'
		}

		var mainBox = {
			template: '<div class="main">右边区域</div>'
		}

		var router = new VueRouter({
			routes: [{
				path:'/',
				components:{
					default:header,
					left:leftBox,
					main:mainBox
				}
			}]
		});

		var vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			},
			router
		});
	</script>

</html>